<template>
  <div class="default-content-background page-user-list">

    <qtable
      :querys="querys"
      :columns = "columns"
      dataApi="/admin/user/list"
      ref = 'pcOrderTable'
      >
    </qtable>

    <qmodal
      type="tip"
      :show="isShowUserInfoModal"
      width="400">
      <div slot="head">
        <span style="font-size: 16px;color: #2B2C2F">查看用户信息</span>
        <img style="width: 20px;height: 20px;float: right;cursor: pointer" src="../../assets/close.png" @click="closeDialog('isShowUserInfoModal')"  />
      </div>
      <div class="revise-form" slot="tip">
        <Row>
          <Col span="5">
            <div class="user-info-modal-label">手机号</div>
          </Col>
          <Col span="19"><Input v-model="currentUserMobile" readonly></Input></Col>
        </Row>
        <br>
        <Row>
          <Col span="5">
            <div class="user-info-modal-label">用户密码</div>
          </Col>
          <Col span="8">
            <Input value="******" readonly></Input>
          </Col>
          <Col span="1">
            &nbsp;
          </Col>
          <Col span="5">
            <Button style=""  type="primary" @click="initUserPassword()">点击初始化密码</Button>
          </Col>
        </Row>
      </div>
    </qmodal>
    <qmodal
      type="tip"
      :show="isShowAddModal"
      width="400">
      <div slot="head">
        <span style="font-size: 16px;color: #2B2C2F"><img class="adjust-pop-icon" src="../../assets/jia.png" alt="">商户修改-加京币</span>
        <img style="width: 20px;height: 20px;float: right;cursor: pointer" src="../../assets/close.png" @click="closeDialog('isShowAddModal')"  />
      </div>
      <div class="revise-form" slot="tip">
        <div style="margin-bottom: 35px">
          <Form ref="newShopData" :model="adjustMoneyData" :label-width="70">
            <FormItem label="加京币">
              <InputNumber :max="50000" :min="0" v-model="adjustMoneyData.adjustMoneyNum"></InputNumber>&emsp;<span class="font-16">京币</span>
            </FormItem>
            <FormItem label="实际金额">
              <InputNumber :max="50000" :min="0" v-model="adjustMoneyData.money_count"></InputNumber>&emsp;<span class="font-16">元</span>
            </FormItem>
            <FormItem label="赠送京币">
              <InputNumber :max="50000" :min="0" v-model="adjustMoneyData.gift"></InputNumber>&emsp;<span class="font-16">元</span>
            </FormItem>
            <FormItem label="备注:">
              <Input v-model="adjustMoneyData.remark" type="textarea" :rows="4" placeholder="请在框内写明加京币操作原因，最多15个字。"></Input>
            </FormItem>
          </Form>
        </div>
        <Button style="float: right; margin-top:-17px;"  type="primary" @click="showConfirmAdjust()">确定增加</Button>
      </div>
    </qmodal>
    <qmodal
      type="tip"
      :show="isShowSubtractModal"
      width="400">
      <div slot="head">
        <span style="font-size: 16px;color: #2B2C2F"><img class="adjust-pop-icon" src="../../assets/jian.png" alt="">商户修改-减京币</span>
        <img style="width: 20px;height: 20px;float: right;cursor: pointer" src="../../assets/close.png" @click="closeDialog('isShowSubtractModal')"  />
      </div>
      <div class="revise-form" slot="tip">
        <div style="margin-bottom: 35px">
          <Form ref="newShopData" :model="adjustMoneyData" :label-width="70">
            <FormItem label="减京币">
              <InputNumber :max="50000" :min="0" v-model="adjustMoneyData.adjustMoneyNum"></InputNumber>&emsp;<span class="font-16">京币</span>
            </FormItem>
            <FormItem label="实际金额">
              <InputNumber :max="50000" :min="0" v-model="adjustMoneyData.money_count"></InputNumber>&emsp;<span class="font-16">元</span>
            </FormItem>
            <FormItem label="备注:">
              <Input v-model="adjustMoneyData.remark" type="textarea" :rows="4" placeholder="请在框内写明减京币操作原因，最多15个字。"></Input>
            </FormItem>
          </Form>
        </div>
        <Button style="float: right; margin-top:-17px;"  type="primary" @click="showConfirmAdjust()">确定减少</Button>
      </div>
    </qmodal>
    <z1001modal 
      :is-show="isShowConfirmPop"
      :content="confirmPopText"
      @on-close='closeDialog("isShowConfirmPop")'
      @on-confirm='confirmAdjustMoney'>
    </z1001modal>
    <z1001modal 
      :is-show="isShowConfirmOperateUser"
      :content="confirmOperateUserText"
      @on-close='closeDialog("isShowConfirmOperateUser")'
      @on-confirm='confirmOperateUser'>
    </z1001modal>
  </div>
</template>

<script>
import qmodal from "../../components/qModal.vue";
import qtable from "../../components/qTable.vue";
import z1001modal from "../../components/z1001Modal.vue";
export default {
  name: "page-user-list",
  data() {
    return {
      isShowConfirmPop: false,
      confirmPopText: "",

      isShowUserInfoModal: false,
      currentUserMobile: "13856895714",

      isShowAddModal: false,
      isShowSubtractModal: false,
      adjustMoneyData: {
        adjustMoneyNum: 0,
        money_count: 0,
        gift: 0,
        remark: ""
      },
      currentUserMoney: -1,
      currentGiftMoney: -1,
      currentAdjustMoneyPhoneNum: "",
      currentAdjustMoneyType: "",

      isShowConfirmOperateUser: false,
      confirmOperateUserText: "",
      currentOperateText: "",
      currentRow: {},
      currentSetStatus: "",

      columns: [
        {
          title: "用户手机号码",
          align: "center",
          key: "phone_number"
        },
        {
          title: "注册时间",
          align: "center",
          key: "insert_time"
        },
        {
          title: "最近充值时间",
          align: "center",
          key: "recent_charge_time",
          render: (h, params) => {
            let renderText = params.row.recent_charge_time
              ? params.row.recent_charge_time
              : "- -";
            return h("div", [h("span", renderText)]);
          }
        },
        {
          title: "用户京币余额",
          align: "center",
          key: "balance",
          render: (h, params) => {
            let renderText = `${params.row.balance / 100}`;
            return h("div", [h("span", renderText)]);
          }
        },
        {
          title: "赠送京币余额",
          align: "center",
          key: "gift_count",
          render: (h, params) => {
            let renderText = params.row.gift_count
              ? `${params.row.gift_count / 100}`
              : 0;
            return h("div", [h("span", renderText)]);
          }
        },
        {
          title: "状态",
          align: "center",
          key: "status",
          render: (h, params) => {
            let renderText = "";
            switch (params.row.status) {
              case "normal":
                renderText = "正常";
                break;
              case "forbidden":
                renderText = "禁用";
                break;
              case "stopped":
                renderText = "停用";
                break;
              default:
                break;
            }
            return h("div", [h("span", renderText)]);
          }
        },
        {
          title: "操作",
          key: "customOptions",
          width: 205,
          align: "center",
          render: (h, params) => {
            let vm = this;
            let hasCharged = params.row.recent_charge_time;
            let options = {
              checkDetail: h(
                "a",
                {
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      vm.isShowUserInfoModal = true;
                      vm.currentUserMobile = params.row.phone_number;
                      vm.currentRow = params.row;
                    }
                  }
                },
                "查看详情"
              ),
              addMoney: h(
                "a",
                {
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      vm.showAddModal("add", params.row);
                    }
                  }
                },
                "加京币"
              ),
              subtractMoney: h(
                "a",
                {
                  style: {
                    marginRight: "5px"
                  },
                  on: {
                    click: () => {
                      vm.showAddModal("subtract", params.row);
                    }
                  }
                },
                "减京币"
              ),
              enableUser: h(
                "a",
                {
                  on: {
                    click: () => {
                      vm.operateUser(params.row);
                    }
                  }
                },
                "启用"
              ),
              disableUser: h(
                "a",
                {
                  style: {
                    color: "#CC3D3D"
                  },
                  on: {
                    click: () => {
                      vm.operateUser(params.row);
                    }
                  }
                },
                "停用"
              ),
              cancelBanUser: h(
                "a",
                {
                  on: {
                    click: () => {
                      vm.operateUser(params.row);
                    }
                  }
                },
                "解禁"
              ),
              banUser: h(
                "a",
                {
                  style: {
                    color: "#CC3D3D"
                  },
                  on: {
                    click: () => {
                      vm.operateUser(params.row);
                    }
                  }
                },
                "禁用"
              )
            };
            let result = [
              options.checkDetail,
              options.addMoney,
              options.subtractMoney
            ];
            switch (params.row.status) {
              case "normal":
                if (hasCharged) {
                  result.push(options.disableUser);
                } else {
                  result.push(options.banUser);
                }
                break;
              case "forbidden":
                result.push(options.cancelBanUser);
                break;
              case "stopped":
                result.push(options.enableUser);
                break;

              default:
                break;
            }
            return h("div", result);
          }
        }
      ],
      querys: {
        queryTips: ["用户手机号", "状态"],
        queryTypes: ["input", "select"],
        queryLists: [
          null,
          [
            {
              value: "normal",
              label: "正常"
            },
            {
              value: "forbidden",
              label: "禁用"
            },
            {
              value: "stopped",
              label: "停用"
            }
          ]
        ],
        queryParamNames: ["phoneNumber", "status"]
      }
    };
  },
  filters: {},
  methods: {
    async confirmAdjustMoney() {
      let params = {
        count: this.adjustMoneyData.adjustMoneyNum,
        remark: this.adjustMoneyData.remark,
        money_count: this.adjustMoneyData.money_count,
        gift_count: this.adjustMoneyData.gift,
        user_id: this.currentRow.user_id
      };
      try {
        await this.$api.setUserBalance(params, this.currentAdjustMoneyType);
        let modalConfig = {
          type: "success",
          content: "调整京币成功!"
        };
        this.$store.commit("showGlobalModal", modalConfig);
        this.$refs.pcOrderTable.getTableDataByHttp();
        this.isShowAddModal = false;
        this.isShowSubtractModal = false;
        this.adjustMoneyData = {
          adjustMoneyNum: 0,
          remark: "",
          money_count: 0,
          gift: 0
        };
      } catch (error) {
        let modalConfig = {
          type: "fail",
          content: "服务器异常,调整京币失败!"
        };
        this.$store.commit("showGlobalModal", modalConfig);
      }
      this.isShowConfirmPop = false;
    },
    closeDialog(name) {
      this[name] = false;
    },
    showConfirmAdjust() {
      let result = 0;
      if (this.currentAdjustMoneyType === "add") {
        result = this.currentUserMoney + this.adjustMoneyData.adjustMoneyNum;
        result = result.toFixed(2);
        this.confirmPopText = `你确定将用户${this.currentAdjustMoneyPhoneNum}<br>
      京币金额调整为${result}京币？<br>并赠送${this.adjustMoneyData.gift}京币？`;
      } else {
        if (this.adjustMoneyData.adjustMoneyNum < this.currentUserMoney) {
          result = this.currentUserMoney - this.adjustMoneyData.adjustMoneyNum;
          result = result.toFixed(2);
          this.confirmPopText = `你确定将用户${this.currentAdjustMoneyPhoneNum}<br>
      京币金额调整为${result}京币？<br>并赠送${this.adjustMoneyData.gift}京币？`;
        } else {
          if (
            this.adjustMoneyData.adjustMoneyNum >
            this.currentUserMoney + this.currentGiftMoney
          ) {
            let modalConfig = {
              type: "fail",
              content: "减京币数大于用户余额，减京币失败!"
            };
            this.$store.commit("showGlobalModal", modalConfig);
            return false
          } else {
            result = 0;
            let giftResult =
              this.currentGiftMoney -
              this.adjustMoneyData.adjustMoneyNum +
              this.currentUserMoney;
            result = result.toFixed(2);
            giftResult = giftResult.toFixed(2);
            this.confirmPopText = `你确定将用户${this.currentAdjustMoneyPhoneNum}<br>
      京币金额调整为${result}京币？<br>并将赠送京币调整为${giftResult}？`;
          }
        }
      }
      this.isShowConfirmPop = true;
    },
    async initUserPassword() {
      try {
        let res = await this.$api.initUserPassword({
          new_password: "123456",
          user_id: this.currentRow.user_id
        });
        let modalConfig = {
          type: "success",
          content: "初始化密码成功!<br>初始密码为123456"
        };
        this.$store.commit("showGlobalModal", modalConfig);
        this.isShowUserInfoModal = false;
      } catch (error) {
        let modalConfig = {
          type: "fail",
          content: "服务器异常,初始化密码失败!"
        };
        this.$store.commit("showGlobalModal", modalConfig);
      }
    },
    showAddModal(type, row) {
      this.currentAdjustMoneyPhoneNum = row.phone_number;
      this.currentUserMoney = row.balance / 100;
      this.currentGiftMoney = row.gift_count / 100;
      this.currentAdjustMoneyType = type;
      this.currentRow = row;
      if (type === "add") {
        this.isShowAddModal = true;
      } else {
        this.isShowSubtractModal = true;
      }
    },
    operateUser(row) {
      this.currentRow = row;
      let hasCharged = row.recent_charge_time;
      let user = row.phone_number;
      let operateText = "";
      switch (row.status) {
        case "normal":
          if (hasCharged) {
            operateText = "停用";
          } else {
            operateText = "禁用";
          }
          break;
        case "forbidden":
          operateText = "解禁";
          break;
        case "stopped":
          operateText = "启用";
          break;

        default:
          break;
      }
      this.currentSetStatus = row.status;
      this.currentOperateText = operateText;
      this.isShowConfirmOperateUser = true;
      this.confirmOperateUserText = `你确定将用户${user}<br>${operateText}吗？`;
    },
    async confirmOperateUser() {
      try {
        let hasCharged = this.currentRow.recent_charge_time;
        let status = "";
        switch (this.currentRow.status) {
          case "normal":
            if (hasCharged) {
              status = "stopped";
            } else {
              status = "forbidden";
            }
            break;

          default:
            status = "normal";
            break;
        }
        let res = await this.$api.setUserStatus({
          status,
          user_id: this.currentRow.user_id
        });
        let modalConfig = {
          type: "success",
          content: `操作成功!<br>已${this.currentOperateText}用户`
        };
        this.$store.commit("showGlobalModal", modalConfig);
        this.$refs.pcOrderTable.getTableDataByHttp();
      } catch (error) {
        let modalConfig = {
          type: "fail",
          content: `服务器异常,${this.currentOperateText}用户失败!`
        };
        this.$store.commit("showGlobalModal", modalConfig);
        console.info(error);
      }
      this.isShowConfirmOperateUser = false;
    }
  },
  components: {
    qmodal,
    qtable,
    z1001modal
  },
  mounted: function() {}
};
</script>

<style lang="less">
.font-16 {
  font-size: 16px;
}
.page-user-list {
  padding: 10px;
  .ivu-table-row a {
    color: #15a089;
    transition: opacity 0.2s;
  }
  .ivu-table-row a:hover {
    opacity: 0.7;
  }
}
.user-info-modal-label {
  line-height: 36px;
  font-size: 14px;
  color: #1a1a1a;
}
.adjust-pop-icon {
  width: 28px;
  margin-right: 10px;
  vertical-align: middle;
}
.revise-form {
  padding-right: 12px;
}
.revise-form .ivu-form .ivu-form-item-label {
  text-align: left;
  padding-right: 0;
}
.task-detail-modal {
  font-size: 14px;
  line-height: 24px;
  .color-a8a8a8 {
    color: #a8a8a8;
  }
}
</style>
